<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box input{
            border:none;
            background: darkgray;
        }
        #box input.active{
            background: red;
        }
        #box div{
            width:200px;
            height:200px;
            border:1px solid red;
            text-align: center;
            line-height: 200px;
            display: none;
            margin:10px;
        }
    </style>
    <script>
        window.onload=function(){
            var tab=new Tab("box");
            tab.init();
        }
        function Tab(id){
            this.oBox=document.getElementById('box');
            this.aBtn=this.oBox.getElementsByTagName('input');
            this.aDiv=this.oBox.getElementsByTagName('div');
        }
        Tab.prototype.init=function(){
            var This=this;
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index=i;
                this.aBtn[i].onclick=function(){
                    This.change(this);
                }
            }
        }
        Tab.prototype.change=function(obj){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className='';
                this.aDiv[i].style.display="none";
            }
            obj.className='active';
            this.aDiv[obj.index].style.display="block";
        }
    </script>
</head>
<body>
<div class="box" id="box">
    <input type="button" value="按钮1" class="active">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;">第一个按钮</div>
    <div>第二个按钮</div>
    <div>第三个按钮</div>
</div>
</body>
</html>